<template>
  <!-- 募资期 -->
  <el-container>
    <el-aside class="mini-tabs panorama" width="200px">
      <el-aside class="fundMenu" width="200px" style="top: 70px;">
        <el-menu
          :default-active="defaultActive"
          class="el-menu-vertical-demo"
          :unique-opened="true"
          @select="handleSelect"
        >
          <template v-for="item in childLeftMenu">
            <el-menu-item :key="item.id" :index="item.id">
              <span slot="title">{{ $t(item.menuName) }}</span>
            </el-menu-item>
          </template>

        </el-menu>

      </el-aside>
    </el-aside>
    <div v-if="showHome === false" class="voteMain">
      <component :is="menuPath" ref="menuPath" :parameter="parameter" />
    </div>
    <el-main v-show="showHome === true" class="diyMain">
      <div class="list-table">
        <ul class="disting">
          <li style="background: linear-gradient(to right bottom, #FC6E7C 0%,#FFA185 100%);">
            <p>出资总数</p>
            <span>5</span>
          </li>
          <li style="background: linear-gradient(to right bottom, #A46CF1 0%,#D99CFB 100%);">
            <p>总认缴（万）</p>
            <span>5</span>
          </li>
          <li style="background: linear-gradient(to right bottom, #3D9FFD 0%,#7AD6FF 100%);">
            <p>总实缴（万）</p>
            <span>5</span>
          </li>
          <li class="mb0" style="background: linear-gradient(to right bottom, rgb(246,194,61) 0%, rgb(247,215,135) 100%);">
            <p>实缴比例（%）</p>
            <span>5</span>
          </li>
        </ul>
      </div>
      <el-card class="box-card box-card-list bodyH" style="margin-top: 20px;">

        <div slot="header" class="clearfix">
          <div class="area-header">
            <span class="area-header-sign" />
            <span class="area-header-title">出资人信息</span>
          </div>
        </div>

        <div class="text item">
          <el-table border style="width: 100%">
            <el-table-column prop="name1" label="出资人名称" />
            <el-table-column prop="name2" label="出资人类型" />
            <el-table-column prop="name3" label="认缴时间" />
            <el-table-column prop="name4" label="认缴金额" />
            <el-table-column prop="name5" :label="$t('币种')" />
            <el-table-column prop="name6" label="认缴比例" />
            <el-table-column prop="name7" label="实缴金额" />
            <el-table-column prop="name8" label="实缴比例" />
          </el-table>
        </div>
      </el-card>
    </el-main>
  </el-container>

</template>
<script>
import merge from 'webpack-merge'
import { getAsyncComponent } from '@/utils'
export default {
  props: {
    busId: {
      type: String,
      default: () => ''
    },
    busType: {
      type: String,
      default: () => ''
    },
    childLeftMenu: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      showHome: true,
      loading: false,
      ac: ['1'],
      // 组件地址
      menuPath: '',
      parameter: {}
    }
  },
  computed: {
    defaultActive: function() {
      if (localStorage.getItem('fundPath') === '' || localStorage.getItem('fundPath') === null || localStorage.getItem('fundPath') === undefined) {
          return ''
        } else {
          return localStorage.getItem('fundPath')
      }
    }
  },
  mounted() {
    this.listComponent()
  },
  methods: {
    load() {
      if (this.$refs.menuPath?.init !== undefined) {
        var data = {}
        data.id = this.busId
        this.$refs.menuPath.init(data)
        this.$refs.menuPath.openLocation = 'fundHome'
      }
    },
    // 获取地址
    async handleSelect(key) {
      localStorage.setItem('fundPath', key) // 记录地址
      const index = this.childLeftMenu.findIndex(children => children.id === key)
      const menuPath = this.childLeftMenu[index].component
      if (menuPath != null) {
        this.importFormPath(menuPath)
      } else {
        const error = 'error/404'
        this.importFormPath(error)
      }
    },

    // 引入组件
    importFormPath(menuPath) {
      this.showHome = false
      const newPath = menuPath.lastIndexOf('\/')
      var strPath = ''

      if (menuPath.indexOf('?') === -1) { // 不含问号
        strPath = menuPath.substring(newPath + 1, menuPath.length)
        this.menuPath = getAsyncComponent('@/views/' + menuPath)
        this.parameter = {}
      } else {
        const index = menuPath.lastIndexOf('?')
        const sMenuPath = menuPath.substring(0, index)
        this.menuPath = getAsyncComponent('@/views/' + sMenuPath)

        strPath = sMenuPath.substring(sMenuPath.lastIndexOf('\/') + 1, sMenuPath.length)
        // 增加参数
        const newKey = menuPath.split('?')[1]
        var newstr = newKey.replace(/=/g, '":"')
        const objectKey = '{"' + newstr.replace(/&/g, '","') + '"}'
        this.parameter = JSON.parse(objectKey)
      }
      this.$router.push({ // 地址栏添加左侧菜单地址
        query: merge(this.$route.query, { 'menuPath': strPath })
      })
    },
    listComponent() {
      this.$bus.$on('async_done', () => {
        this.load()
        // 记录点击菜单
        // if (this.defaultActive !== '' || this.defaultActive !== null || this.defaultActive !== undefined) {
        //   this.showHome = false
        //   this.childLeftMenu.forEach(child => {
        //       if (child.id === this.defaultActive) {
        //         this.menuPath = getAsyncComponent('@/views/' + child.component)
        //       }
        //   })
        // } else {
        //   this.showHome = true
        // }
      })
    }
  }
}
</script>

